import React, { Component } from 'react'
import Hrader from '../../../components/head/hrader'
import './myWallet.less'
import cookies from 'js-cookie'
import axios from 'axios';
import imgsrc from '../../../img/morentouxiang.png';
import { connect } from 'react-redux';
import fun from '../../../store/action/index'
// import imgsrc from '../../../img/vip.png';

class MyWallet extends Component {
    constructor() {
        super()
        this.state = {
            headtitle: { title: '我的钱包', path: '/my' },
            nowindex: 0,//明细积分  --  钱包
            contentdata: ['全部', '兑入', '兑出'],
            contentindex: 0,//内容的删选
            change_record: [],//金钱记录
            integral_record: [],//积分记录
            user_data: [],//用户信息数据
            // againstenter: [],//兑入
            // againstgo: [],//兑出
            applyagainst: [],//渲染数据
            user_portrait: imgsrc,//头像
        }
    }
    render() {
        let { nowindex, contentdata, user_data, applyagainst, user_portrait } = this.state
        console.log(applyagainst);
        return (
            <div className="myWallet_box">
                <div className="myWallet_ding">
                    <Hrader title={this.state.headtitle} />
                </div>
                <div className="myWallet_body">
                    {/* 用户信息盒子 */}
                    <div className="myWallet_message">
                        <div className="myWallet_message1"></div>
                        <div className="myWallet_message2"></div>
                        <div className="myWallet_messagecontent">
                            <div>
                                <div className="myWallet_messagehead">
                                    <div className="myWallet_messageheads">
                                        <span> <img src={user_portrait} className="MyConsumption_img" alt="" />
                                        </span>
                                        <b>{user_data.user_account}
                                            <i className={
                                                // this.state.classTitle
                                                user_data.user_vipGrade === '0' ? 'iconfont icon-V0' :
                                                    `${user_data.user_vipGrade === '1' ? 'iconfont icon-v1' :
                                                        user_data.user_vipGrade === '2' ? 'iconfont icon-V' : 'iconfont icon-V1'}`
                                            } id="classV">
                                            </i>
                                        </b>
                                    </div>
                                    <div className="myWallet_issue">常见问题</div>
                                </div>
                                <p className="myWallet_balance">总计余额  <b>{user_data.now_loose}</b></p>
                            </div>
                            <div className="myWallet_bottom">
                                <p onClick={() => { this.money(0) }}><span className="iconfont icon-jinqian"></span>钱包明细</p>
                                <p onClick={() => { this.money(1) }}><span className="iconfont icon-jifen"></span>积分明细</p>
                            </div>
                        </div>
                    </div>
                    {/* ？？交易提示 */}
                    <div className="myWallet_nowindex">
                        {this.state.nowindex === 0 ? '金额交易记录' : '积分交易记录'}
                    </div>
                    {/* 内容 */}
                    <div className="myWallet_content">
                        <div className="myWallet_contenthead">
                            {contentdata.map((item, index) => {
                                return <p onClick={() => { this.contentdata(index, nowindex) }} key={index} className={`${this.state.contentindex === index ? 'myWallet_contaction' : null}`}>{item}</p>
                            })}
                        </div>
                        <div className="myWallet_contentbody">
                            {/* {'MMP'} */}
                            {/* {'map'} */}
                            <div>
                                {nowindex === 0 ? <>{
                                    applyagainst.map((item, index) => {
                                        // return <div key={index} className="animate__backInRight animate__animated ">
                                        return <div key={index} className=" animate__animated ">
                                            <p>{Number(item.record_money) > 0 ? '充值金额' : '消费金额'}</p>
                                            <p className="myWallet_addMoney">{Number(item.record_money) > 0 ? '+' : '—'}{item.record_money} 元</p>
                                            <span>{item.timer}</span>
                                        </div>
                                    })
                                }
                                </> : <>{
                                    applyagainst.map((item, index) => {
                                        // return <div key={index} className="animate__backInRight animate__animated ">
                                        return <div key={index} className=" animate__animated ">
                                            <p>{Number(item.integral) > 0 ? '充值获得积分' : '消费积分'}</p>
                                            <p>{Number(item.integral) > 0 ? '+' : '-'}{item.integral}</p>
                                            <span>{item.timer}</span>
                                        </div>
                                    })
                                }
                                </>}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    UNSAFE_componentWillMount() {
        const _this = this
        if (this.props.message) {
            let { message } = this.props
            // console.log(message);
            _this.setState({
                user_data: message,//数据
                user_portrait: message.user_portrait,//头像
            })
        } else
            if (cookies.get('usertoken')) {
                axios({
                    method: 'post',
                    url: '/api/front_end/userMess',
                    data: {
                        user_account: cookies.get('usertoken'),
                    }
                }).then((res) => {
                    let datas = res.data
                    if (datas.code === '01') {
                        _this.setState({
                            user_data: datas.data,//数据
                            user_portrait: datas.data.user_portrait
                        })
                    }
                })
            }
        if (cookies.get('user_id')) {
            axios({
                method: 'post',
                url: '/api/front_end/myLoose',
                data: {
                    user_id: cookies.get('user_id'), //用户id
                }
            }).then(res => {
                // console.log(res.data);
                if (res.data.code === '01') {
                    // console.log(res.data.data);
                    this.setState({
                        applyagainst: res.data.change_record,
                        change_record: res.data.change_record,
                        integral_record: res.data.integral_record
                    })
                }
            })
        }
    }

    // 明细点击
    money = (index) => {
        // change_record: [],//金钱记录
        // integral_record: [],//积分记录
        if (index === 0) {
            this.setState({ nowindex: index, applyagainst: this.state.change_record })
        } else {
            this.setState({ nowindex: index, applyagainst: this.state.integral_record })
        }
    }

    // 交易记录渲染
    contentdata = (index, nowindex) => {
        if (nowindex === 0) {
            // let data = this.state.change_record.filter((item) => Number(item.record_money) > 0)
            // console.log(data);
            if (index === 0) {
                let data = this.state.change_record
                this.setState({ contentindex: index, applyagainst: data })
            } else if (index === 1) {
                let data = this.state.change_record.filter((item) => Number(item.record_money) > 0)
                this.setState({ contentindex: index, applyagainst: data })
            } else {
                let data = this.state.change_record.filter((item) => Number(item.record_money) < 0)
                this.setState({ contentindex: index, applyagainst: data })
            }
        } else {
            if (index === 0) {
                let data = this.state.integral_record
                this.setState({ contentindex: index, applyagainst: data })
            } else if (index === 1) {
                let data = this.state.integral_record.filter((item) => Number(item.integral) > 0)
                this.setState({ contentindex: index, applyagainst: data })
            } else {
                let data = this.state.integral_record.filter((item) => Number(item.integral) < 0)
                this.setState({ contentindex: index, applyagainst: data })
            }
        }

    }

}
export default connect(state => state.Login, fun.loginAction)(MyWallet)
